<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/admin/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div v-if="show">
      <el-card v-if="total>1">
        <el-row :gutter="20">
          <el-col :span="15">
            <el-input placeholder="请输入内容" class="input-with-select">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="createUser(false)">添加用户</el-button>
          </el-col>
        </el-row>
        <el-table :data="data" border stripe>
          <el-table-column type="index" label="#"></el-table-column>
          <el-table-column label="用户名" prop="username"></el-table-column>
          <el-table-column label="姓名" prop="name"></el-table-column>
          <el-table-column label="电话" prop="tel"></el-table-column>
          <el-table-column label="角色" prop="type"></el-table-column>
          <el-table-column label="操作" width="120px">
            <template slot-scope="scope">
              <el-tooltip effect="dark" content="修改" placement="top" :enterable="false">
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  size="mini"
                  @click="changeData(scope)"
                ></el-button>
              </el-tooltip>
              <el-tooltip effect="dark" content="删除" placement="top" :enterable="false">
                <el-button type="danger" icon="el-icon-delete" size="mini" @click="delData(scope)"></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-card>
      <create-user @child-event="createUser" :fdata="client" v-else />
    </div>
    <create-user @child-event="createUser" :fdata="client" v-else />
  </div>
</template>

<script>
import CreateUser from "./CreateUser";
export default {
  components: { CreateUser },
  props: ["fshow"],
  watch: {
    fshow: {
      handler(newValue, oldValue) {
        this.show = newValue;
      }
    }
  },
  data() {
    return {
      data: null,
      client: {},
      currentPage: 1,
      pageSize: 10,
      total: 0,
      show: true
    };
  },
  // props: ["routerData"],
  methods: {
    createUser(val) {
      // console.log(val, this.fshow);
      this.client.create = true;
      this.$emit("child-event");
    },
    handleSizeChange(newSize) {
      // 监听 每页显示数 改变事件
      this.pageSize = newSize;
      sessionStorage.setItem("pageSize", newSize);
      this.getData();
    },
    handleCurrentChange(newPage) {
      //监听 页码值 改变事件
      this.currentPage = newPage;
      sessionStorage.setItem("currentPage", newPage);
      this.getData();
    },
    userDataChanged(val) {
      let updata = this.$del(val);
      updata.state = val.state ? 1 : 0;
      console.log(updata);
    },
    changeData(val) {
      this.client = this.data[val.$index];
      this.client.create = false;
      this.$emit("child-event");
    },
    delData(val) {},
    getData() {
      let tmp = Number(sessionStorage.getItem("pageSize"));
      if (!tmp) {
        tmp = this.pageSize;
        sessionStorage.setItem("pageSize", this.pageSize);
      } else if (tmp != this.pageSize) this.pageSize = tmp;
      tmp = Number(sessionStorage.getItem("currentPage"));
      if (!tmp) {
        tmp = this.currentPage;
        sessionStorage.setItem("currentPage", this.currentPage);
      } else if (tmp != this.currentPage) this.currentPage = tmp;
      tmp = Number(sessionStorage.getItem("total"));
      if (!tmp) {
        tmp = this.total;
        sessionStorage.setItem("total", this.total);
      }

      tmp = {
        token: localStorage.getItem("token"),
        table: sessionStorage.getItem("table")
      };
      if (sessionStorage.getItem("key")) {
        tmp[sessionStorage.getItem("key")] = Number(
          sessionStorage.getItem("val")
        );
      }
      if (!this.total) {
        tmp.sum = 1;
        tmp = { cmd: 0, val: tmp };
        this.$axios
          .post("q.php", tmp)
          .then(result => {
            if (result.data) {
              this.total = result.data.sum;
              sessionStorage.setItem("total", this.total);
              this.getData();
              return;
            }
            this.$message.error("1发生错误!可能您与服务器的网络连接中断");
          })
          .catch(err => {
            this.$message.error("2发生错误!可能您与服务器的网络连接中断");
          });
        return;
      }
      tmp = { cmd: 0, val: tmp };
      this.$axios
        .post("q.php", tmp)
        .then(result => {
          if (result.data) {
            this.data = result.data;
            // console.log(this.currentPage, this.pageSize, this.total);
            // console.log(result.data);
            this.client.manage = this.data.length > 1 ? true : false;
            return;
          }
          this.$message.error("3发生错误!可能您与服务器的网络连接中断");
        })
        .catch(err => {
          this.$message.error("4发生错误!可能您与服务器的网络连接中断");
        });
    }
  },
  created() {
    this.getData();
  }
};
</script>

<style lang="less" scoped>
</style>
